<template>
  <q-layout view="hHh Lpr lFf">
    <q-header>
      <q-toolbar>
        <q-toolbar-title> Lycaht Test </q-toolbar-title>
        <div>Quasar v{{ $q.version }}</div>
      </q-toolbar>
    </q-header>

    <q-drawer
      show-if-above
      :width="350"
      :breakpoint="500"
      bordered
      content-class="bg-grey-3"
    >
    </q-drawer>

    <q-page-container>
      <div class="q-mt-md q-ml-md">
        <!-- 测试需要的表单数据 -->
        <div>
          <q-form @submit="onStart">
            <div class="row">
              <div class="my-input">
                <q-input
                  label="连接数"
                  outlined
                  :readonly="runIs"
                  type="number"
                  v-model.number="param.connectionNum"
                  :rules="[
                    (val) => (val > 0 && val <= 100000) || '连接数1~100000',
                  ]"
                  dense
                />
              </div>
              <div class="my-input q-ml-md">
                <q-input
                  label="登录数"
                  type="number"
                  outlined
                  :readonly="runIs"
                  v-model.number="param.loginNum"
                  :rules="[
                    (val) => (val > 0 && val <= 100000) || '登录数1~100000',
                  ]"
                  dense
                />
              </div>
              <div class="my-input q-ml-md">
                <q-input
                  label="消息qps"
                  type="number"
                  outlined
                  :readonly="runIs"
                  v-model.number="param.sendMsgCount"
                  :rules="[(val) => (val > 0 && val <= 10000000) || '消息qps 1~10000000']"
                  dense
                />
              </div>
              <!-- <div class="my-input q-ml-md">
                <q-input
                  label="运行时间（秒）"
                  type="number"
                  outlined
                  :readonly="runIs"
                  v-model.number="param.runSeconds"
                  :rules="[
                    (val) => (val >= 30 && val <= 180) || '运行时间30~180',
                  ]"
                  dense
                />
              </div> -->
              <div class="my-input q-ml-md">
                <q-btn
                  v-if="!runIs"
                  round
                  type="submit"
                  color="positive"
                  icon="play_circle_filled"
                  :loading="submitLoading"
                />
                <q-btn
                  v-else
                  round
                  type="submit"
                  color="negative"
                  icon="stop"
                  :loading="submitLoading"
                />
                <!-- <q-circular-progress
                  v-else
                  class="cursor-pointer"
                  show-value
                  @click="onStop"
                  :value="runResidueTime"
                  :max="param.runSeconds"
                  size="42px"
                  :thickness="0.2"
                  color="positive"
                  track-color="grey-5"
                >
                  <q-icon name="stop" size="24px" color="negative" />
                </q-circular-progress> -->
              </div>
            </div>
          </q-form>
        </div>
        <div class="q-mt-md q-mb-md">
          <q-separator />
        </div>
        <!-- 实时的数据统计 -->
        <div class="row">
          <div>
            <Card
              :value="total.sendSum"
              label="发送消息总数"
              icon="send"
              iconColor="positive"
            ></Card>
          </div>
          <div class="q-ml-md">
            <Card
              :value="total.receiveSum"
              label="接收消息总数"
              icon="markunread"
              iconColor="accent"
            ></Card>
          </div>
          <div class="q-ml-md">
            <Card
              :value="total.connectionNum"
              label="连接数"
              icon="cast_connected"
              iconColor="primary"
            ></Card>
          </div>
          <div class="q-ml-md">
            <Card
              :value="total.loginNum"
              label="登陆数"
              icon="important_devices"
              iconColor="positive"
            ></Card>
          </div>
        </div>
        <div class="q-mt-md q-mb-md">
          <q-separator />
        </div>
        <!-- 动态数据图标 -->
        <div class="q-mt-md q-mb-md">
          <div class="text-h6 q-mb-lg">消息量实时线性图</div>
          <div id="line"></div>
        </div>
      </div>
    </q-page-container>
  </q-layout>
</template>

<script>
import Card from "@/components/Card";
import ws from "@/utils/websocket.js";
import { Line } from "@antv/g2plot";
import { PressureTest } from "@/api/api.js";

var lineDy;

export default {
  name: "LayoutDefault",
  data() {
    return {
      runIs: false,
      // runResidueTime: 0,
      // runInterval: null,
      submitLoading: false,
      param: {
        connectionNum: 10000,
        loginNum: 10000,
        sendMsgCount: 100
      },
      total: {
        sendSum: 0,
        receiveSum: 0,
        sendErrSum: 0,
        connectionNum: 0,
        loginNum: 0,
      },
    };
  },
  mounted() {
    ws.onMessage((data) => this.onMessage(data));
    // ws.open("ws://49.232.130.18:8080/pressureTest");
    ws.open("ws://127.0.0.1:8080/pressureTest");

    lineDy = new Line("line", {
      data: [],
      padding: "auto",
      xField: "x",
      yField: "y",
      seriesField: "type",
      label: {},
      xAxis: {
        type: "time",
        mask: "HH:MM:ss",
      },
      smooth: true,
      point: {},
    });
    lineDy.render();
  },
  methods: {
    onMessage(msg) {
      if (msg.type === "PRESSURETEST_DATA") {
        this.total.sendSum = msg.content.sendMsgNumSum;
        this.total.receiveSum = msg.content.receiveMsgNumSum;
        this.total.connectionNum = msg.content.connectionNum;
        this.total.loginNum = msg.content.loginNum;
        let timeStamp = msg.content.timeStamp;
        if (timeStamp.toString().length == 10) {
          timeStamp *= 1000;
          let send = {
            x: timeStamp,
            y: msg.content.sendMsgNum,
            type: "send",
          };
          let receive = {
            x: timeStamp,
            y: msg.content.receiveMsgNum,
            type: "receive",
          };
          let lineDt = lineDy.options.data;
          let newData = [];
          if (lineDt.length > 20) {
            newData = lineDy.options.data.slice(2).concat(send, receive);
          } else {
            newData = lineDy.options.data.concat(send, receive);
          }
          lineDy.changeData(newData);
        }
      }
    },
    onStart() {
      this.submitLoading = true;
      if (this.runIs) {
        PressureTest.stop()
          // eslint-disable-next-line no-unused-vars
          .then((res) => {
            this.runIs = false;
            this.submitLoading = false;
          })
          .catch(() => (this.submitLoading = false));
      } else {
        PressureTest.start(this.param)
          // eslint-disable-next-line no-unused-vars
          .then((res) => {
            this.runIs = true;
            this.submitLoading = false;
          })
          .catch(() => (this.submitLoading = false));
      }
    },
  },
  components: {
    Card,
  },
};
</script>

<style scoped>
.my-input {
  width: 200px;
}
</style>
